<template>
  <div class="lunarFullCalendar">
    <div class="full-calendar">
      <lunar-full-calendar
        :events="events"
        ref="calendar"
        @event-selected="eventSelected"
        :config="config"
        @day-click="dayClick"
      ></lunar-full-calendar>

      <sheduleCard  @close="closeCard" ref="card"  :isShow="isShow"/>
    </div>
    <!-- <div class="tip" @click="enter">详细请看说明（点击此处进入）</div> -->
  </div>
</template>
<script>
// import { LunarFullCalendar } from 'vue-lunar-full-calendar'
// import { LunarFullCalendar } from '../../components'
// import { LunarFullCalendar } from '../../lib/LunarFullCalendar.min.js'
// import LunarFullCalendar from 'vue-lunar-full-calendar'
import sheduleCard from '../../components/common/sheduleCard.vue'
export default {
    components: {
      sheduleCard
    },
  data () {
    return {
      isShow:false,
      events: [
        {
          id: 1,
          title: "数据1",
          allDay: true,
          start: "2022-09-10",
          end:"2022-09-11"
        },
        {
          id: 2,
          title: "数据2",
          start:"2022-09-12",
          end:"2022-09-14"
        },
        {
          id: 3,
          title: "数据3",
          start: "2022-09-11",
          end:"2022-09-18"
        },

        {
          id: 4,
          title: "数据4（增加中国农历、24节气和节假日的问题）",
          start: "2022-09-13",
          end:"2022-09-24"
        },
        { id:5,
          title:"事件5",
          start:'2022-09-08 10:00',
          end:'2022-09-08 11:00',
          allDay:false,
        }
        
        // {
        //   id: 6,
        //   title:
        //     "数据6（增加中国农历、24节气和节假日的问题Increase the functions of Chinese lunar calendar, 24 solar terms and holidays）",
        //   start: "2022-09-09 03:00",
        //   end: "2022-09-09 10:30",
        // },
      ],
      config: {
        lunarCalendar: true, // 是否显示农历
        fixedWeekCount: false, // 设置false没有显示5周，不设置则默认显示6周
        firstDay: 1, //设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        aspectRatio: 2.5, // 设置日历单元格宽度与高度的比例

        eventTimeFormat: { // 在每个事件上显示的时间的格式
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
    

        // height: 600,
        // headerToolbar: {
        //   center: "title",
        //   left: "timeGridDay,timeGridWeek,dayGridMonth",
        // },
        header :{
        //   left: "today prev next title",
          left: 'today prev next title ',
          center: '',
          right: "agendaDay,agendaWeek,month,custom",
          //   right: 'custom, month,agendaWeek,agendaDay'
        },
        
        
// timeFormat: 'HH:mm' ,
//  axisFormat: 'HH:mm',
//  titleFormat:{day:"'H:mm'"},

        // axisFormat: '',

        // 配置标题年月格式展示
        // views: {
        //   month: {
        //     titleFormat: "YYYY年MM月",
        //   },
        // //   agendaDay:{ 
        // //     titleFormat: "HH:mm"
        // //   }
        // },
        // eventOrder:'index',   // 这个是控制事件排序的功能，意思是 按照字段 事件数据中index来排序
        // eventLimitClick: 'day', //点击今天日列表图
        handleWindowResize: true,
        buttonText: { today: "今天", day: "日", week: "周", month: "月" },
        locale: "zh-cn",
        editable: false, //是否允许修改事件
        selectable: false,
        eventLimit: 4, //事件个数
        allDaySlot: true, //是否显示allDay
        timezone:"local",
        defaultView: "month", //显示默认视图
        eventClick: this.eventClick, //点击事件
        dayClick: this.dayClick, //点击日程表上面某一天
        eventMouseover: this.eventMouseover, // 鼠标放上时候的事件
        customButtons: {
          prev: {
            // this overrides the prev button
            text: "PREV",
            click: () => {
              this.prev();
            },
          },
          next: {
            // this overrides the next button
            text: "NEXT",
            click: () => {
              this.next();
            },
          },
          today: {
            text: "今天",
            click: () => {
              this.today();
            },
          },
          custom: {
            text: "找会议室",
            click: () => {
              console.log("找会议室啦啦啦啦");
            },
          },
        },
      },
    };
  },
  methods: {
    // 注释的是功能是可以修改对应的功能值属性，比如设置  eventLimit为 false
    //  this.$refs.calendar.fireMethod('option',{
    //      eventLimit :false
    //  })
    dayClick(date, jsEvent, view) {
      // 点击当天的事件
      alert("农历数据：" + JSON.stringify(window.lunar(date._d)));
      console.log(date, jsEvent, "dayClick");
    },
    eventSelected(event, jsEvent, view) {
      // 选中事件
      console.log(event, jsEvent, "eventSelected");
    },
    viewRender(view, element) {
      console.log(view, element, "viewRender");
    },
    enter() {
      this.$router.push("/explain");
    },
    today(mouseEvent, htmlElement) {
      prev;
      this.$refs.calendar.fireMethod("today");
    },
    next(mouseEvent, htmlElement) {
      // calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
      this.$refs.calendar.fireMethod("next");
      // 如果dayGridMonth查看日历，则将日历向前移动一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
    },
    eventClick(data,e){
      console.log("data",e,data)
      console.log("坐标",e.clientX,e.clientY)
      this.isShow=true;

      // let dialogDom = this.$refs.card.$refs.shedule;
      let dialogDom =document.getElementsByClassName("shedule")[0];
      dialogDom.style.position="absolute";
      
      // dialogDom.style.left=(e.screenX)
      console.log("e.scer",e.screenX)
      let x=0;
       if(e.screenX<80){
          x=80
         }else if(e.screenX>1200){
        x=e.screenX-300
       
       }else{
       x=e.screenX-200;
       }
      
       dialogDom.style.left=x+"px"
      console.log("dialogDom.style.left",dialogDom.style.left)
     
      dialogDom.style.top =(e.clientY-70)+"px"
      // dialogDom.getBoundingClientRect().left=e.clientX+"px";
      // dialogDom.getBoundingClientRect().top=e.clientY+"px";


    },
    prev(mouseEvent, htmlElement) {
      this.$refs.calendar.fireMethod("prev");
      //   this.calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
      // 如果dayGridMonth查看日历，则将日历后移一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
    },
    closeCard(){
      this.isShow=false;
      // console.log("isShow",isShow)
    }
  },
  mounted(){
    console.log("div",)
  }
};
</script>
<style scoped lang="scss">
$color: #45b984;
.lunarFullCalendar {
//   min-width: 900px;
  height: 100%;
  background: #fff;
  //   .top {
  //     height: 100px;
  //     h2 {
  //       text-align: center;
  //       font-size: 15px;
  //     }
  //     div {
  //       font-size: 13px;
  //     }
  //   }
  //  ::v-deep{
  ::v-deep .full-calendar {
    padding: 20px;
    height: calc(100% - 30px);
    // /deep/ {
    // ::v-deep{

    .fc-unthemed thead,
    .fc-unthemed .fc-content,
    .fc-unthemed th,
    .fc-unthemed td,
    .fc-unthemed tbody,
    .fc-unthemed .fc-row,
    .fc-unthemed .fc-list-view,
    .fc-unthemed .fc-popover,
    .fc-unthemed .fc-divider,
    .fc-unthemed .fc-list-heading td {
      border-color: #eaecf1;
    }
    .fc-header-toolbar {
      height: 30px;
      margin-bottom: 0;
      line-height: 30px;
      h2 {
        font-size: 24px;
        color: #000;
      }
    }
    .fc-button {
      height: 30px;
      background: #fff;
      border-color: #fff;
      box-shadow: none;
      padding: 0;
    }
    .fc-today-button {
      font-size: 15px;
      color: $color;
    }
    .fc-show-button,
    .fc-hide-button {
      position: relative;
      width: 80px;
      border: 1px solid #bbbfcd;
      border-radius: 20px;
      font-size: 15px;
      color: #000;
    }
    .fc-next-button,
    .fc-prev-button {
      color: #7d8292;
    }
    .fc-button-group {
      margin-left: 20px;
      font-size: 15px;
      button {
        width: 80px;
        color: #000;
        border: 1px solid #bbbfcd;
      }
      button:first-child {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
      }
      button:last-child {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
      }
      .fc-state-active {
        background: $color;
        color: #fff;
        text-shadow: none;
      }
    }
    .fc-agendaDay-view,
    .fc-month-view,
    .fc-agendaWeek-view {
      .fc-widget-content {
        .fc-sun,
        .fc-sat {
          //   background: rgba(245, 246, 248, 0.6);
        }
        .fc-day-number {
          font-size: 15px;
          letter-spacing: 0;
          line-height: 13px;
          float: left;
        }
        .fc-day-top {
          padding: 15px 12px 0 12px;
        }
        .fc-day-cnTerm,
        .fc-day-cnDate {
          font-size: 12px;
          color: #7d8292;
          float: right;
        }
        .fc-more {
          font-size: 12px;
          color: #7d8292;
        }
        .fc-event {
          cursor: pointer;
          font-size: 12px;
          color: #000;
          background-color: rgba($color: $color, $alpha: 0.15) !important;
          border: 1px solid rgba($color: $color, $alpha: 0.15) !important;
          border-left: 2px solid rgba($color: $color, $alpha: 0.15) !important;
          border-radius: 0;
        }
        .fc-day-grid-event {
          padding: 1px 0 1px 5px;
          .fc-content {
            .fc-title::before {
            display:inline-block;
              content: "";
              width: 8px;
              height: 8px;
              background: red;
              border-radius: 50%;
            }
          }
        }
      }
    }
    .fc-agendaWeek-view,
    .fc-agendaDay-view {
      .fc-axis {
        font-size: 15px;
      }
      .fc-title {
        font-size: 15px;
        color: $color;
      }
      .fc-title::before {
        content: "";
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 50%;
      }
    }
    .fc-month-view {
      .fc-event {
        &.fc-not-start {
          border-left: 1px solid rgba($color: $color, $alpha: 0.1) !important;
        }
      }
    }
    .fc-agendaDay-view {
      .fc-head {
        table {
          margin: 15px 0;
        }
        .fc-day-header {
          display: none;
        }
      }
    }
    .fc-head {
      .fc-day-header,
      .fc-widget-header,
      .fc-head-container {
        border-top-color: #fff;
        border-left-color: #fff;
        border-right-color: #fff;
      }
      table {
        margin: 10px 0 15px 0;
        font-size: 15px;
        color: #000;
      }
    }
    // }
  }
  // }
}
.tip {
  color: $color;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
</style>
